<template>
    <el-dialog v-model="show" title="采购入库" width="35%" align-center @close="handleClose">

        <el-row class="mb20">
            <el-col :span="12">
                材料小类：{{ props.initList.paperTypeName }}
            </el-col>
            <el-col :span="12">
                品名及规格：{{ props.initList.specifications }}
            </el-col>
        </el-row>
        <el-row class="mb20">
            <el-col :span="12">
                申请采购数量： {{ props.initList.applyPurchaseNumber }} {{ getUnitLabel() }}
            </el-col>
            <el-col :span="12">
                计划采购数量：{{ props.initList.planPurchaseNumber }} {{ getUnitLabel() }}
            </el-col>
        </el-row>
        <el-row class="mb20">
            <el-col :span="12">
                剩余采购数量： {{ Number(props.initList.planPurchaseNumber) - Number(props.initList.inNumber) }} {{
                    getUnitLabel() }}
            </el-col>
            <el-col :span="12">
                已入库数量：{{ props.initList.inNumber || 0 }} {{ getUnitLabel() }}
            </el-col>
        </el-row>


        <el-row class="mb20">
            <el-col :span="16" style=" display: flex; align-items: center;">
                到货数量：<el-input style="width: 240px;" v-model.number="number"
                    :max="Number(props.initList.planPurchaseNumber) - Number(props.initList.inNumber)"
                    placeholder="请输入">
                    <template #append>{{ getUnitLabel() }}</template>
                </el-input>
            </el-col>

            <el-col :span="4">
                <el-checkbox v-model="overFlag" label="采购单完结" value="采购单完结" />
            </el-col>
        </el-row>

        <el-row class="mb20">
            <el-col :span="24">
                备注: {{ props.initList.remark }}
            </el-col>
        </el-row>
        <el-row class="mb20">
            <el-col :span="24">
                审批备注: {{ props.initList.approvalRemark }}
            </el-col>
        </el-row>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">保 存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">

import { updatePaperPurchaseOrderInboundApi } from '@/api/sj/purchaseManagement/paperProcurement/index';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'unitEnumeration']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const number = ref(0);
const overFlag = ref(false);


const handleSubmit = async () => {

    console.log(overFlag.value);
    if (!number.value) return proxy?.$modal.msgError('请输入数量');

    try {
        const { code } = await updatePaperPurchaseOrderInboundApi({
            paperPurchaseId: props.initList.id,
            number: number.value,
            overFlag: overFlag.value ? 1 : 0
        })

        if (code === 200) {
            proxy?.$modal.msgSuccess('操作成功');
            emits('submit', true);

            handleClose();
        }
    } catch (error) {

    }

    // proxy?.$modal.msgSuccess('操作成功');

};


const handleClose = () => {
    number.value = 0
    emits('close');
};


// 辅助函数获取单位标签
const getUnitLabel = (): string => {
    const unit = props.unitEnumeration?.find((item: any) => item.value == props.initList.unit);
    return unit?.label || '';
};


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.container {
    color: #BDBDBD;
    height: 160px;
    overflow-y: auto;
}
</style>